<script>

import {inject} from "vue";

export default {
  name: "StarHorseSearchComp",
  props: {
    formData: {type: Object, required: true}
  },

  setup() {
    const searchForm = inject("searchForm");
    return {searchForm}
  },
  methods: {
    dataSearch(val) {
      this.$emit("dataSearch", val === 'reset' ? 1 : -1);
    }
  }
}
</script>

<style scoped>

</style>
<template>
  <el-form class = "search_area" size = "mini">
    <el-form-item v-for = "item in formData" :label = "item.label ">
      <el-date-picker v-if = "item.type==='date'" value-format = "YYYY-MM-DD" clearable @change = "dataSearch"
                      :placeholder =
                          "'请选择'+item.label"
                      v-model = "searchForm[item.fieldName]"/>
      <el-select v-else-if = "item.type==='select'" clearable filterable @change = "dataSearch" :placeholder =
          "'请选择'+item.label"
                 v-model = "searchForm[item.fieldName]">
        <el-option v-for = "sitem in item.optionList" :value = "sitem.value" :label = "sitem.name"
                   :key = "sitem.value"/>
      </el-select>
      <el-input v-else clearable @keydown.enter = "dataSearch" :placeholder =
          "'请输入'+item.label"
                v-model = "searchForm[item.fieldName]"/>
    </el-form-item>

    <el-form-item label = "     ">
      <el-button @click = "dataSearch" link type = "primary">
        <user-icon icon = "search" style = "vertical-align: middle;color:#e3e9f2;"/>
        <span style = "vertical-align: middle;"> 查询 </span>
      </el-button>
      <el-button @click = "dataSearch('reset')" link small>
        <span style = "vertical-align: middle;"> 重置 </span>
      </el-button>
    </el-form-item>
  </el-form>
</template>